/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 挖掘查询-搜索结果
 */
import React from "react";
import "./style.scss";
import { observer, inject } from "mobx-react";
import { Pagination, Select, message } from "antd";

const { Option } = Select;

@inject("ExcavateQueryStore")
@observer
class EQueryResult extends React.Component {
    state = {
        keyWords: "",
        showFilter: true,
        filterData: {
            filterType: {
                placeholder: "所属类型",
                data: [{ name: "金融理财", id: "" }, { name: "消费返利", id: "" }]
            },
            filterAmount: {
                placeholder: "使用人数",
                data: [
                    { name: "100人及以下", id: "" },
                    { name: "100-500人", id: "" },
                    { name: "500-2000人", id: "" },
                    { name: "2000人以上", id: "" }
                ]
            },

            filterTime: {
                placeholder: "运营时间",
                data: [
                    {
                        name: "1个月及以下",
                        id: ""
                    },
                    {
                        name: "1-3个月",
                        id: ""
                    },
                    {
                        name: "3个月-1年",
                        id: ""
                    },
                    {
                        name: "1年以上",
                        id: ""
                    }
                ]
            },
            filterScore: {
                placeholder: "风险评分",
                data: [
                    {
                        name: "0-60分",
                        id: ""
                    },
                    {
                        name: "60-70分",
                        id: ""
                    },
                    {
                        name: "70-80分",
                        id: ""
                    },
                    {
                        name: "80-90分",
                        id: ""
                    }
                ]
            },
            filterArea: {
                placeholder: "所属区域",
                data: [
                    { name: "万州区", id: "" },
                    { name: "涪陵区", id: "" },
                    { name: "长寿区", id: "" },
                    { name: "合川区", id: "" },
                    { name: "南川区", id: "" },
                    { name: "永川区", id: "" },
                    { name: "江津区", id: "" },
                    { name: "大足区", id: "" },
                    { name: "黔江区", id: "" },
                    { name: "璧山区", id: "" },
                    { name: "潼南区", id: "" },
                    { name: "荣昌县", id: "" },
                    { name: "铜梁县", id: "" },
                    { name: "垫江区", id: "" },
                    { name: "奉节县", id: "" }
                ]
            }
        },
        sortTypes: [{ name: "默认排序", id: "" }, { name: "最新", id: "" }, { name: "评分", id: "" }],
        sortTypeIndex: 0, // 选种的是第几个
        showRightType: "recently" // recently or hot
    };
    componentDidMount() {
        // 以下请求后续合并触发
        this.getResultListData();
        this.props.ExcavateQueryStore.getRecentlyData();
        this.props.ExcavateQueryStore.getHotData();
    }
    getResultListData() {
        this.props.ExcavateQueryStore.getResultListData();
    }
    handleKeyUp = e => {
        if (e.keyCode !== 13) {
            // 绑定回车键事件
            return false;
        }
        this.getResultListData();
    };
    showDetail(id) {
        this.props.ExcavateQueryStore.setDetailId(id);
        const win = window.open(`${window.location.origin}/#/main/appInfoRetrievalDetails`, "_blank");
        win.focus();
    }
    handleSetNature(type, value, isGetData = true) {
        this.props.ExcavateQueryStore.setNature(type, value, isGetData);
    }
    handleChangeKeyWords = e => {
        this.props.ExcavateQueryStore.changeKeyWords(e.target.value.trim());
    };
    handleChangeFocus() {
        message.info("发送更改关注状态的请求");
    }
    renderFilter() {
        const { filterData } = this.state;
        const dom = [];

        for (let key in filterData) {
            if (filterData.hasOwnProperty(key)) {
                const { placeholder, data } = filterData[key];
                dom.push(
                    <Select
                        style={{ width: 250 }}
                        placeholder={placeholder}
                        onChange={value => this.handleSetNature(key, value, true)}
                        key={`filter-${key}`}
                    >
                        {data.map((d, index) => (
                            <Option value={d.name} key={`${key}-${index}`}>
                                {d.name}
                            </Option>
                        ))}
                    </Select>
                );
            }
        }
        return dom;
    }
    onToggleRightList() {
        const { showRightType } = this.state;
        this.setState({
            showRightType: showRightType === "hot" ? "recently" : "hot"
        });
    }
    render() {
        const {
            keyWords,
            resultListData: { count, lists },
            recentLlyData,
            hotData
        } = this.props.ExcavateQueryStore;
        const { showFilter, sortTypes, sortTypeIndex, showRightType } = this.state;
        return (
            <div className="EQuery-result">
                <div className="wrapper">
                    <div className="top-search">
                        <input
                            type="text"
                            className="search-text"
                            value={keyWords}
                            onChange={this.handleChangeKeyWords}
                            onKeyUp={this.handleKeyUp}
                        />
                        <span className="btn" onClick={() => this.getResultListData()}>
                            搜索
                        </span>
                    </div>
                    <div className="filter">
                        <div
                            className={showFilter ? "filter-btn active" : "filter-btn"}
                            onClick={() => this.setState({ showFilter: !showFilter })}
                        >
                            删选条件
                            <i className="allow-icon" />
                        </div>
                        <div className="filter-lists" style={{ display: showFilter ? "flex" : "none" }}>
                            <div className="reset-btn">重置搜索条件</div>
                            {this.renderFilter()}
                        </div>
                    </div>

                    <div className="sort-wrapper">
                        <div className="sort-types">
                            {sortTypes.map((d, i) => (
                                <span
                                    key={`sort-type-${i}`}
                                    className={sortTypeIndex === i ? "active" : null}
                                    onClick={() =>
                                        this.setState({ sortTypeIndex: i }, () =>
                                            this.handleSetNature("sortType", d.name, true)
                                        )
                                    }
                                >
                                    {d.name}
                                </span>
                            ))}
                        </div>
                        <div className="amount">
                            <span>
                                共找到<em className="count">{count}</em>个 APP
                            </span>
                            <div className="default-btn">导出 Excel 列表</div>
                        </div>
                    </div>

                    <ul className="lists-data">
                        {lists.length > 0 &&
                            lists.map((d, index) => (
                                <li key={`EQuery-lists-${index}`} className="list-inner">
                                    <div className="list-left">
                                        <img src={d.logo} alt="" className="logo" />
                                        <div className="name" title={d.name} onClick={() => this.showDetail(d.id)}>
                                            {d.name}
                                        </div>
                                    </div>
                                    <div className="list-center">
                                        <p>
                                            <span>APP类型：</span>
                                            <span className="light-text">{d.type}</span>
                                        </p>
                                        <p>
                                            <span>最近更新日期：</span>
                                            <span>{d.updateTime}</span>
                                        </p>
                                        <p>
                                            <span>发现日期：</span>
                                            <span>{d.findTime}</span>
                                        </p>
                                        <p>
                                            <span>活跃区域：</span>
                                            <span>{d.address}</span>
                                        </p>
                                        <p>
                                            <span>备注信息：</span>
                                            <span>{d.text}</span>
                                        </p>
                                    </div>
                                    <div className="list-right">
                                        <div className="score">{d.score}</div>
                                        <div className="light-text">风险评分</div>
                                        <div className={d.focus ? "focus-btn active" : "focus-btn"}>
                                            {d.focus ? "取消关注" : "+ 加入关注"}
                                        </div>
                                    </div>
                                </li>
                            ))}
                    </ul>

                    <div className="table-pagination">
                        <Pagination
                            defaultcurrent={6}
                            total={500}
                            onChange={page => this.props.ExcavateQueryStore.changePage(page)}
                        />
                    </div>
                </div>
                <div className="right-lists">
                    <div className={showRightType === "recently" ? "right-lists-item active" : "right-lists-item"}>
                        <div className="title">最近查看APP</div>
                        <ul className="lists">
                            {recentLlyData.length > 0 &&
                                recentLlyData.map((d, i) => (
                                    <li key={`recently-${i}`}>
                                        <p>{d.name}</p>
                                        <p>{d.time}</p>
                                    </li>
                                ))}
                        </ul>
                        <div className="foot-btn" onClick={() => this.onToggleRightList()} />
                    </div>
                    <div className={showRightType === "hot" ? "right-lists-item active" : "right-lists-item"}>
                        <div className="title">热点APP</div>
                        <ul className="lists">
                            {hotData.length > 0 &&
                                hotData.map((d, i) => (
                                    <li key={`recently-${i}`}>
                                        <p>{d.name}</p>
                                        <p>{d.time}</p>
                                    </li>
                                ))}
                        </ul>
                        <div className="foot-btn" onClick={() => this.onToggleRightList()} />
                    </div>
                </div>
            </div>
        );
    }
}

export default EQueryResult;
